<template>
  <el-form :model="form">
    <el-form-item>
      <el-input placeholder="请输入用户名" v-model="form.userName">
        <template #prefix>
          <el-icon :size="iconSize">
            <UserFilled />
          </el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item>
      <el-input
        :type="isShow ? 'text' : 'password'"
        placeholder="请输入密码"
        v-model="form.password"
        @keydown.enter="handleLogin"
      >
        <template #prefix>
          <el-icon :size="iconSize">
            <Lock />
          </el-icon>
        </template>
        <template #suffix>
          <el-icon
            :size="iconSize"
            @click="isShow = !isShow"
            style="cursor: pointer"
          >
            <component :is="isShow ? 'View' : 'Hide'" />
          </el-icon>
        </template>
      </el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" round @click="handleLogin">登 录</el-button>
    </el-form-item>
    <el-divider>其他方式登录</el-divider>
    <el-form-item>
      <div class="login-methods">
        <img src="../../../assets/QQ.svg" />
        <img src="../../../assets/github.svg" />
        <img src="../../../assets/twitter.svg" />
        <img src="../../../assets/weixin.svg" />
      </div>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();
const iconSize = ref(18); // 图标大小
const isShow = ref(false); // 是否显示密码
const form = ref({
  userName: "",
  password: "",
});

function handleLogin() {
  if (form.value.userName == "admin" && form.value.password == "123") {
    ElMessage.success("登录成功");
    localStorage.setItem("token", "admin");
    router.push("/");
  } else {
    ElMessage.error("用户名或密码错误");
  }
}
</script>
<style scoped>
.login-wrapper {
  position: relative;
}

.login-wrapper .header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  color: #fff;
  background: transparent;
}

.login-wrapper .header .logo {
  justify-content: start;
}

.login-wrapper .header .logo :deep(.logo-title) {
  color: #fff !important;
}

.login-wrapper .header .lang:hover {
  background: transparent;
}

.login-wrapper .login-container {
  display: flex;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: #293246;
}

.login-wrapper .login-container .login-left {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 50vw;
  height: 100%;
  background-image: url("../../assets/loginbg.svg");
  background-repeat: no-repeat;
  background-position: 100%;
  background-size: auto 100%;
}

.login-wrapper .login-container .login-left-wrap {
  height: 80vh;
  margin: auto;
}

.login-wrapper .login-container .login-left-wrap .img {
  width: 280px;
  margin-top: 10vh;
}

.login-wrapper .login-container .login-left-wrap .title,
.login-wrapper .login-container .login-left-wrap .desc {
  max-width: 500px;
  font-weight: bold;
  color: #fff;
  letter-spacing: 1.2px;
}

.login-wrapper .login-container .login-left-wrap .desc {
  font-size: 28px;
}

.login-wrapper .login-container .login-left-wrap .tip {
  color: #fff;
}

.login-wrapper .login-container .login-form {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50vw;
  height: 100vh;
}

.login-wrapper .login-container .login-form .form-warp {
  width: 400px;
  padding: 1rem 3rem 0 3rem;
  margin: auto;
  background-color: #fff;
  border-radius: 8px;
}

.login-wrapper .login-container .login-form.is-mobile {
  width: 100%;
}

.login-wrapper .login-container .login-form.is-mobile .form-warp {
  width: 100%;
  margin: 0 15px;
}
.login-methods {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.login-methods img {
  width: 40px;
  height: 40px;
}
</style>
